<script setup lang="ts">
import ${EntityName}FormPanel from './${EntityName}FormPanel.vue'
import { ${EntityName}Api } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'
import { useUserStore } from '@/stores'

defineOptions({ name: '${EntityName}' })

const userStore = useUserStore()
const queryForm = reactive<${EntityName}Api.${EntityName}Query>({
<#list fieldConfigs as fieldConfig>
<#if fieldConfig.showInQuery>
  ${fieldConfig.fieldName}: undefined,
</#if>
</#list>
})

const {
  tableData,
  loading,
  pagination,
  search,
  handleDelete
} = useTable((pagination) => ${EntityName}Api.getPage({ ...queryForm, ...pagination }))

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize)
  },
  <#if fieldConfigs??>
  <#list fieldConfigs as fieldConfig>
  <#if fieldConfig.showInList>
  { title: '${fieldConfig.comment}', dataIndex: '${fieldConfig.fieldName}', slotName: '${fieldConfig.fieldName}', ellipsis: true, tooltip: true  },
  </#if>
  </#list>
  </#if>
  {
    title: '操作',
    slotName: 'action',
    width: 120,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['${moduleName}:${entityName}:write'])
  }
]

// 删除
const onDelete = (item: ${EntityName}Api.${EntityName}Resp) => {
  return handleDelete(() => ${EntityName}Api.remove(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true
  })
}

const ${EntityName}FormPanelRef = ref<InstanceType<typeof ${EntityName}FormPanel>>()
// 新增
const onAdd = () => {
  ${EntityName}FormPanelRef.value?.create()
}

// 详情
const onDetail = (row) => {
  ${EntityName}FormPanelRef.value?.open(row.id)
}
</script>

<template>
  <ProPage title="${businessName}管理" description="对${businessName}进行统一管理">
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @refresh="search"
      @row-click="onDetail"
     >
      <template #toolbar-left>
      <#list fieldConfigs as fieldConfig>
      <#if fieldConfig.showInQuery>
        <#if fieldConfig.formType == "SELECT"><#-- 下拉框 -->
        <a-select
          v-model="queryForm.${fieldConfig.fieldName}"
          :options="${fieldConfig.fieldType}"
          placeholder="请选择${fieldConfig.comment}"
          allow-clear
          style="width: 150px"
          @change="search"
        />
        <#elseif fieldConfig.formType == "RADIO"><#-- 单选框 -->
        <a-radio-group v-model="queryForm.${fieldConfig.fieldName}" :options="${fieldConfig.fieldType}" @change="search"/>
        <#elseif fieldConfig.formType == "DATE"><#-- 日期框 -->
        <#if fieldConfig.queryType == "BETWEEN">
        <a-range-picker
          v-model="queryForm.${fieldConfig.fieldName}"
          :placeholder="['请选择开始${fieldConfig.comment}','请选择结束${fieldConfig.comment}']"
          format="YYYY-MM-DD"
          style="width: 100%"
        />
        <#else>
        <a-date-picker
          v-model="queryForm.${fieldConfig.fieldName}"
          placeholder="请选择${fieldConfig.comment}"
          format="YYYY-MM-DD"
          style="width: 100%"
        />
        </#if>

        <#elseif fieldConfig.formType == "DATE_TIME"><#-- 日期时间框 -->
        <#if fieldConfig.queryType == "BETWEEN">
        <a-range-picker
          v-model="queryForm.${fieldConfig.fieldName}"
          :placeholder="['请选择开始${fieldConfig.comment}','请选择结束${fieldConfig.comment}']"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
        <#else>
        <a-date-picker
          v-model="queryForm.${fieldConfig.fieldName}"
          placeholder="请选择${fieldConfig.comment}"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
        </#if>
        <#else>
        <a-input v-model="queryForm.${fieldConfig.fieldName}" placeholder="请输入${fieldConfig.comment}" allow-clear @change="search">
          <template #prefix><icon-search /></template>
        </a-input>
        </#if>
      </#if>
      </#list>
      </template>
      <template #toolbar-right>
        <a-button v-enrollPermission="['${moduleName}:${entityName}:write']" type="primary" @click="onAdd">
          <template #icon><icon-plus /></template>
          <span>创建</span>
        </a-button>
      </template>
      <template #action="{ record }">
        <a-space>
        <a-link v-enrollPermission="['${moduleName}:${entityName}:write']" status="danger" @click="onDelete(record)">删除</a-link>
        </a-space>
      </template>
    </ProTable>
    <${EntityName}FormPanel ref="${EntityName}FormPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped></style>
